body {
    background: url('../img/login/云.png') no-repeat;
    background-position: bottom left;
    background-attachment: fixed;
    -webkit-animation: mymove 60s infinite alternate;
    /* Chrome, Safari, Opera */
    animation: mymove 60s infinite;

    /* Chrome, Safari, Opera */
    @-webkit-keyframes mymove {
        100% {
            background-position: bottom center;
        }
    }

    /* Standard syntax */
    @keyframes mymove {
        100% {
            background-position: bottom right;
        }
    }
}

// 头部
.header {
    background-color: #fff;

    &>.head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 79px;

        &>.header-left {
            display: flex;
            align-items: center;

            &>.vertical {
                width: 2px;
                height: 32px;
                margin-left: 20px;
                background-color: #eaeaea;
            }
        }

        .text {
            font-size: 16px;
            color: #333333;
            letter-spacing: 1px;
            margin-left: 20px;
            cursor: pointer;
        }

        &>.header-right {
            display: flex;
        }
    }
}

//主体
.main {
    height: 827px;


    overflow: hidden;



    &>.content {
        position: relative;
        display: flex;
        height: 602px;
        width: 900px;
        margin: 85px auto 100px;
        // background-color: #ada;
        background-color: #ffffff;
        box-shadow: 0px 1px 40px 0px rgba(220, 220, 220, 0.42);
        border-radius: 14px;



        &>.login-method {
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
        }

        // 账户登录
        &>.login-form {
            display: flex;
            flex-direction: column;
            justify-content: center;



            &>.login {

                display: flex;
                justify-content: space-evenly;
                font: 22px MicrosoftYaHei;
                color: #bbb;

                &>.tab-active {
                    position: relative;

                    color: #000;

                    &:after {
                        content: '';
                        position: absolute;
                        bottom: -6px;
                        left: -2px;
                        width: 91px;
                        height: 5px;
                        background-color: #55aaff;
                        border-radius: 3px;
                    }
                }



            }

            // 用户登录
            &>.user-login-form {
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                height: 350px;
                margin-top: 30px;

                &>.input-box>.input-concrol>.input-text>.input-text-input {
                    width: 344px;
                }

                // &>.user-name,
                // &>.password {
                //     width: 320px;                
                // }

                &>.btn-login {
                    width: 344px;
                    height: 60px;
                    margin-top: 20px;
                    background-color: #55aaff;
                    border-radius: 4px;

                }

                &>.form-actions {
                    display: flex;
                    justify-content: space-between;
                    height: 17px;
                    font-family: MicrosoftYaHei;
                    font-size: 17px;
                    line-height: 17px;
                    color: #55aaff;
                }
            }

            // 手机登录
            &>.phone-login-form {
                display: flex;
                flex-direction: column;
                justify-content: space-evenly;
                height: 350px;
                margin-top: 30px;

                position: relative;

                &>.input-box>.input-concrol>.input-text>.input-text-input {
                    width: 344px;
                }

                // &>.phone-num {
                //     width: 320px;
                // }

                &>.verification {
                    display: flex;
                    justify-content: space-between;

                    &>.input-box>.input-concrol>.input-text>.input-text-input {
                        width: 160px;
                    }

                    // &>.verification-code {

                    //     width: 160px;

                    // }

                    &>.obtain-verification-code {
                        font-size: 17px;
                        line-height: 60px;
                    }
                }


                &>.btn-login {
                    width: 344px;
                    height: 60px;
                    margin-top: 20px;
                    background-color: #55aaff;
                    border-radius: 4px;

                }

                &>.form-actions {
                    display: flex;
                    justify-content: space-between;
                    height: 17px;
                    font-family: MicrosoftYaHei;
                    font-size: 17px;
                    line-height: 17px;
                    color: #55aaff;
                }

                &>.card-set-password {
                    position: absolute;
                    top: 10px;
                    left: -350px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 582px;
                    height: 275px;
                    background-color: #ffffff;
                    border-radius: 8px;

                    &>.title {

                        margin: 45px 0 20px 0;
                        font-size: 24px;
                        color: #3e3e3e;
                    }

                    &>.set-password {

                        width: 421px;

                    }




                    &>.btn-box {

                        position: relative;
                        display: flex;
                        justify-content: space-between;
                        width: 445px;
                        margin: 32px 0 0 0;

                        &:after {
                            position: absolute;
                            content: "*密码不得少于8个字符 且含有字母";
                            top: -24px;
                            left: 0;
                            width: 445px;
                            font-size: 12px;
                            color: #ff0000;
                        }

                        &>.btn-set-password {
                            width: 147px;
                            height: 38px;
                            background-color: #f0f3f8;
                            border-radius: 4px;
                        }
                    }
                }
            }


            // 其他登录方式
            &>.other-login {
                display: flex;
                flex-direction: column;

                &>.text {
                    display: flex;
                    justify-content: center;
                    height: 17px;
                    margin: 10px 0 20px 0;
                    line-height: 17px;
                    font-family: MicrosoftYaHei;
                    font-size: 17px;
                    color: #aaaaaa;
                }

                &>.login-items {
                    display: flex;
                    justify-content: space-around;
                }
            }

        }

        // 扫码登录
        &>.login-QR-code {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 344px;

            &>:nth-child(1) {
                font-size: 22px;
            }

            &>.QR-code {
                width: 216px;
                height: 216px;
                margin: 28px 0 41px 0;
                border: solid 2px #000;
            }

            &>:nth-child(3) {
                font-size: 17px;
            }

            &>:nth-child(4) {
                margin: 40px 0 28px 0;
                font-size: 17px;
                color: #bbb;
            }

            &>.login-items {
                display: flex;
                justify-content: space-evenly;
                width: 216px;

                &>.login-items {
                    display: flex;
                    justify-content: space-around;
                }
            }
        }

        // 账号注册
        &>.regsiter-form {
            display: flex;
            flex-direction: column;
            // justify-content: space-evenly;
            margin-top: 30px;
            // height: 540px;
            width: 336px;

            &>.regsiter {
                font-size: 24px;
                color: #333;
            }

            &>.input-box {
                margin-top: 19px;
            }

            &>.input-box>.input-concrol>.input-text>.input-text-input {
                width: 344px;
            }

            &>.phone-num,
            &>.password,
            &>.password-again {
                width: 320px;
            }

            &>.regsiter-verification {
                display: flex;
                justify-content: space-between;
                margin-top: 31px;

                &>.input-box>.input-concrol>.input-text>.input-text-input {
                    width: 160px;
                }

                // &>.regsiter-verification-code {
                //     width: 160px;
                // }

                &>.regsiter-obtain-verification-code {
                    line-height: 60px;
                }
            }

            &>.prompt {
                font-size: 13px;
                color: #a3a3ad;
                margin: 0 auto;
            }

            &>.accept-terms {
                display: flex;
                align-items: flex-end;
                font-size: 14px;


                &>.checkbox {

                    display: block;
                    width: 16px;
                    height: 16px;
                    background-color: #bbb
                }



                &>.tick {
                    position: relative;
                    width: 20px;
                    color: #bbb;
                }

                &>.tick:after {
                    content: '\2714';
                    /*这是html特殊字符的css编码*/

                    position: absolute;
                    top: -20px;
                    left: -14px;
                    font-size: 16px;
                    /*用字号来调整对勾的大小*/
                }

                //打钩后的样式
                &>.active {
                    background-color: #55aaff;
                    color: #fff;
                }

                &>.text {
                    margin-top: 31px;
                    font-size: 13px;
                    color: #a3a3ad;

                    &>a {
                        color: #55aaff;
                        ;
                    }
                }


            }

            &>.btn-regsiter {
                width: 344px;
                height: 60px;
                margin-top: 20px;
                background-color: #55aaff;
                border-radius: 4px;
                font-size: 17px;
                color: #fff;
            }

            &>.form-actions {
                display: flex;
                justify-content: space-between;
                margin-top: 19px;
                height: 17px;
                font-family: MicrosoftYaHei;
                font-size: 17px;
                line-height: 17px;
                color: #55aaff;
            }
        }


    }


    .input {

        height: 60px;
        background-color: #f9f9f9;
        border-radius: 4px;
        padding-left: 24px;
    }

    .input-box {
        height: 60px;

        border-radius: 4px;

        &>.input-concrol {
            &>.input-text {
                position: relative;

                &>.input-text-input {
                    box-sizing: border-box;
                    height: 60px;
                    width: 445px;
                    padding: 30px 20px 10px;
                    background-color: #f9f9f9;
                }

                &>.input-text-label {
                    cursor: text;
                    user-select: none;
                    position: absolute;
                    left: 20px;
                    top: 20px;
                    height: 20px;
                    font-weight: 400;
                    font-size: 17px;
                    color: rgba(0, 0, 0, .4);
                    line-height: 20px;
                    transition: top .15s cubic-bezier(.4, 0, .2, 1),
                        font-size .15s cubic-bezier(.4, 0, .2, 1),
                        color .15s cubic-bezier(.4, 0, .2, 1);
                    max-width: calc(100% - 20px);
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    overflow: hidden;
                }

                &>.input-text-label-float {
                    top: 6px;
                    font-size: 12px;
                }
            }
        }
    }




    
}
//尾部
.footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 36px 0 42px;
    font-size: 12px;
    letter-spacing: 0px;
    color: #999;

    &>.copy {
        font-size: 22px;
        margin-right: 10px;
    }
}